<template>
	<view class="wrap">
		<view class="mian" v-model="item">
			<view class="demo-warter w-50 ">
				<view class="demo-title">
					{{item.researchName}}
				</view>
				<view class="demo-tag">
					<view class="demo-tag-owner">
						拉丁名:{{item.researchLatinName}}
					</view>
					<view class="demo-tag-text">
						别名:{{item.researchAnotherName}}
					</view>
				</view>
				<image v-if="!item.researchImage" :src="imagedf" mode="" class="image"></image>
				<image v-if="item.researchImage" v-for="img in item.researchImage" :key="img+'-only'" :src="img"
					:alt="img" />
				<view class="dtile">
					<view class="rit">
						<view class="demo-text">
							频度:{{item.researchFrequence}}
						</view>
						<view class="demo-text">
							是否最新:{{item.newest}}
						</view>
						<view class="demo-text">
							盖度:{{item.researchCovery}}
						</view>
						<view class="demo-text">
							海拔:{{item.researchAltitude}}
						</view>
						<view class="demo-text">
							伴生物种:{{item.researchMutualism}}
						</view>
						<view class="demo-text">
							调查时间:{{item.researchDate}}
						</view>
						<view class="demo-text">
							发生密度:{{item.researchDensity}}
						</view>
						<view class="demo-text">
							优势度:{{item.researchDominance}}
						</view>
						<view class="demo-text">
							利用价值:{{item.researchUsage}}
						</view>
						<view class="demo-text">
							经纬度:{{item.researchLnglat}}
						</view>
						<view class="demo-text">
							交通航运影响:{{item.researchTraffic}}
						</view>
						
						<view class="demo-text">
							传播方式:{{item.researchSpread}}
						</view>
					</view>
				</view>
				<view class="foot">
					<view class="demo-text">
						调查地点:
					</view>
					<view class="demo-text-sm">
						{{item.researchPlace}}
					</view>
					<view class="demo-text">
						农业危害:
					</view>
					<view class="demo-text-sm">
						{{item.researchAgriculture}}
					</view>
					<view class="demo-text">
						林业危害:
					</view>
					<view class="demo-text-sm">
						{{item.researchForestry}}
					</view>
					<view class="demo-text">
						养殖业危害:
					</view>
					<view class="demo-text-sm">
						{{item.researchBreeding}}
					</view>
				</view>
				<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon> -->
			</view>
		</view>
	</view>



</template>

<script>
	import proData from "@/common/projectData.js";
	import imgData from "@/common/uiImg.js";
	import {
		baseUrl
	} from "../../common/utils/request.js";
	import {
		getLoadList,
		getDicts,
		selectDictLabel,
		getLoadDtile
	} from '../../common/api/myupload.js';
	import {
		checkNullAndUndefine
	} from '../../common/utils/checkNU.js';
	import {
		// 生境字典
		researchEnvironmentOptions,
		// 传播方式字典
		researchSpreadOptions,
		// 优势度 1:建群种 2:优势种 3:常见种 4:偶见种 5:罕见种或单株字典
		researchDominanceOptions,
		// 利用价值 1:食用价值 2:饲喂价值 3:药用价值 4:科研价值 5:观赏价值 6:生产价值 7:生态价值字典
		researchUsageOptions,
		// 交通航运影响 0:否 1:是字典
		researchTrafficOptions
	} from '../../common/config/dict.js';
	export default {
		data() {
			return {
				baseUrl: '',
				item: {},
				imagedf: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=544169164,1388607622&fm=26&gp=0.jpg',

			}
		},
		onLoad(option) {
			this.baseUrl = baseUrl
			console.log(option.researchId)
			this.addRandomData(option.researchId);
		},
		methods: {
			addRandomData(researchId) {
				getLoadDtile(researchId).then(response => {
					this.item = response[1].data.data;
					for (let i in this.item) {
						if (i != 'researchImage') {
							this.item[i] = checkNullAndUndefine(this.item[i])
						}
					}
					if (this.item.researchImage != null && this.item.researchImage != "") {
						this.item.researchImage = this.item.researchImage
							.split(",")
							.map(a => {
								return baseUrl + a;
							});
					}
					console.log(response);
					this.item.researchEnvironment = this.getResearchEnvironment(
						this.item.researchEnvironment
					);
					this.item.researchSpread = this.getResearchSpread(
						this.item.researchSpread
					);
					this.item.researchUsage = this.getResearchUsage(
						this.item.researchUsage
					);
					this.item.researchTraffic = selectDictLabel(
						researchTrafficOptions,
						this.item.researchTraffic
					);
					this.item.researchDominance = selectDictLabel(
						researchDominanceOptions,
						this.item.researchDominance
					);


				});
			},
			getResearchEnvironment(word) {
				let wordList = word.split(",");
				let resList = [];
				let i = 0;
				for (let wor of wordList) {
					resList[i] = selectDictLabel(researchEnvironmentOptions, wor);
					i++;
				}
				return resList.toString();
			},
			getResearchSpread(word) {
				let wordList = word.split(",");
				let resList = [];
				let i = 0;
				for (let wor of wordList) {
					resList[i] = selectDictLabel(researchSpreadOptions, wor);
					i++;
				}
				return resList.toString();
			},
			getResearchUsage(word) {
				let wordList = word.split(",");
				let resList = [];
				let i = 0;
				for (let wor of wordList) {
					resList[i] = selectDictLabel(researchUsageOptions, wor);
					i++;
				}
				return resList.toString();
			},
			// initFun() {
			// 	getDicts("research_environment").then(response => {
			// 		this.researchEnvironmentOptions = response.data;
			// 	});
			// 	getDicts("research_spread").then(response => {
			// 		this.researchSpreadOptions = response.data;
			// 	});
			// 	getDicts("research_dominance").then(response => {
			// 		this.researchDominanceOptions = response.data;
			// 	});
			// 	getDicts("research_usage").then(response => {
			// 		this.researchUsageOptions = response.data;
			// 	});
			// 	getDicts("sys_yes_no").then(response => {
			// 		this.researchTrafficOptions = response.data;
			// 	});
			// 	console.log(this.researchEnvironmentOptions);
			// }

		}

	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>

<style lang="scss" scoped>
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 45rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 15rpx;
		margin-bottom: 15rpx;
	}

	.demo-tag-owner {
		background-color: $u-type-success;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-success;
		color: $u-type-success;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-text-sm {
		margin: 10px;
		line-height: 2;
	}

	.demo-text {
		margin: 10px;
		line-height: 2;
		font-weight: 700;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}

	.mian {
		width: 257%;
	}

	.w-50 {
		width: 38%;
	}

	.demo-warter {
		border-radius: 8px;
		margin: 10px 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.dtile {
		display: flex;
		flex-wrap: wrap;
	}

	.rit {
		margin-left: 5px;
	}

	.foot {
		margin-left: 5px;
	}

	.image {
		margin: 20rpx 0;
		height: 600rpx;
	}
</style>
